<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Incremental Rendering</title>
    <script src="../dist/quark-renderer.js"></script>
</head>
<body style="margin:0px;">
    <canvas id="main" width="1000px" height="600px" style="width:1000px;height:600px;"></canvas>
    <script type="text/javascript">
        let qr = QuarkRenderer.init(document.getElementById('main'));

        qr.add(new QuarkRenderer.Rect({
            shape: {
                x: 0,
                y: 0,
                width: qr.getWidth(),
                height: qr.getHeight()
            },
            style: {
                fill: 'red'
            }
        }));

        let countText = new QuarkRenderer.Text({
            zlevel: 1,
            style: {
                text: 0,
                x: 10,
                y: 10,
                textFont: '40px sans-serif',
                textFill: '#fff',
                textStroke: '#000',
                textStrokeWidth: 2
            }
        });
        qr.add(countText);

        let count = 0;

        qr.globalAnimationMgr.on('frame', function ()  {
            if (count > 2e4) {
                return;
            }
            for (let i = 0; i < 200; i++) {
                let circleShape = new QuarkRenderer.Circle({
                    shape: {
                        r: 5 + Math.random() * 5
                    },
                    style: {
                        fill: '#121',
                        blend: 'lighter'
                    },
                    incremental: true,
                    position: [Math.random() * qr.getWidth(), Math.random() * qr.getHeight()]
                });
                qr.add(circleShape);
            }

            countText.style.text += 200;
            countText.dirty();
            count += 200;
        });
    </script>
</body>
</html>